<template>
  <div>
    <div class="box">
      <div class="topBar">
        <el-form
          ref="queryForm"
          :model="queryForm"
          :inline="true"
          label-width="120px"
          rule="quertRules"
        >
          <el-form-item label="公司名称：" prop="entityName">
            <!-- <el-input v-model="queryForm.customerNm" placeholder="请输入"> </el-input> -->
            <el-autocomplete
              class="inline-input"
              v-model="queryForm.entityName"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              :trigger-on-focus="false"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="公司ID：" prop="entityId">
            <el-input v-model="queryForm.entityId" placeholder="请输入"> </el-input>
          </el-form-item>
          <el-form-item label="监测类型：" prop="ratingType">
            <el-select v-model="queryForm.ratingType" placeholder="请选择">
              <el-option
                v-for="item in ratingTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="评级日期：" prop="timeOfInvlusion">
            <el-date-picker
              v-model="queryForm.timeOfInvlusion"
              type="daterange"
              value-format="yyyyMMdd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-form>
        <div>
          <el-row>
            <el-col :span="8" style="text-align: right; float: right">
              <el-button type="primary" @click="getData" class="gray-btn">查询</el-button>
              <el-button type="primary" @click="resetFrom" class="btn">重置</el-button>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="bottomInfo">
        <el-table :data="tableData" style="// width: 100%">
          <el-table-column type="index" label="序号"> </el-table-column>
          <!-- <el-table-column prop="txnOppoNm" label="交易对手"> </el-table-column>
          <el-table-column prop="txnOppoId" label="交易对手ID"> </el-table-column>
          <el-table-column prop="bargainId" label="交易编号"> </el-table-column>
          <el-table-column prop="txnCateg" label="交易品种"> </el-table-column>
          <el-table-column prop="txnAmt" label="交易金额" width="200px">
            <template slot-scope="scope">
              {{
                Number(scope.row.txnAmt).toLocaleString("en-US", {
                  style: "decimal",
                  minimumFractionDigits: 0,
                  maximumFractionDigits: 4,
                })
              }}
            </template>
          </el-table-column>
          <el-table-column prop="trader" label="我方交易员"> </el-table-column>
          <el-table-column prop="txnDt" label="交易日期"> </el-table-column>
          <el-table-column prop="txnTm" label="交易时间"> </el-table-column>
          <el-table-column prop="wihteOrBlack" label="资质类型"> </el-table-column>
          <el-table-column prop="timeOfInvlusion" label="纳入时间"> </el-table-column>
          <el-table-column prop="reasonOfSuspension" label="暂停原因"> </el-table-column>
          <el-table-column prop="suspensionOfBusiness" label="暂停业务品种">
          </el-table-column> -->
          <el-table-column
            v-for="(item, index) in tableColumns"
            :prop="item.column"
            :label="item.label"
            :width="item.width"
          >
            <template slot-scope="scope">
              <span>{{ scope.row[item.column] }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="pageFn"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getList,
  getratingType,
  getratingName,
} from "@/api/customerManagement/keyMonitoringList";
export default {
  data() {
    return {
      queryForm: {
        ratingType: "RATING5",
      },
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      quertRules: {
        ratingType: [
          {
            required: true,
            message: "必填项",
            trigger: "change",
          },
        ],
      },
      wihteOrBlackList: [
        {
          label: "黑名单",
          value: "黑名单",
        },
        {
          label: "白名单",
          value: "白名单",
        },
        {
          label: "无资质",
          value: "无资质",
        },
      ],
      tableColumns: [],
      tableColumns1: [
        //  主体评级调低的企业
        {
          column: "entityName",
          label: "公司名称",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "entityCode",
          label: "公司ID",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 240,
        },
        {
          column: "ratingTypeOrganize",
          label: "评级机构",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 260,
        },
        {
          column: "ratingDate",
          label: "评级日期",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "latestEntityRating",
          label: "最新主体评级",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "entityRatingForecast",
          label: "主体评级展望",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
          //   formatter: (scope, value) => {
          //     let returnVal = value;
          //     this.creditOccupyStatusData.forEach((element) => {
          //       if (element.dictCode === value) {
          //         returnVal = element.dictName;
          //       }
          //     });
          //     return returnVal;
          //   },
        },
        {
          column: "ratingChangeReason",
          label: "评级变动原因",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "preRatingDate",
          label: "上次评级日期",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "preEntityRating",
          label: "上次主体评级",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "preEntityRatingForecast",
          label: "上次主体评级展望",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "entityType",
          label: "公司性质",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 170,
        },
        {
          column: "isCtpFlag",
          label: "是否为客户",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
      ],
      tableColumns2: [
        //  评级展望负面的企业
        {
          column: "entityName",
          label: "公司名称",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "entityCode",
          label: "公司ID",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "ratingTypeOrganize",
          label: "评级机构",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "ratingDate",
          label: "评级日期",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "latestEntityRating",
          label: "最新主体评级",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "entityRatingForecast",
          label: "主体评级展望",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
          //   formatter: (scope, value) => {
          //     let returnVal = value;
          //     this.creditOccupyStatusData.forEach((element) => {
          //       if (element.dictCode === value) {
          //         returnVal = element.dictName;
          //       }
          //     });
          //     return returnVal;
          //   },
        },
        {
          column: "ratingChangeReason",
          label: "评级变动原因",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "preRatingDate",
          label: "上次评级日期",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "preEntityRating",
          label: "上次主体评级",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "preEntityRatingForecast",
          label: "上次主体评级展望",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "entityType",
          label: "公司性质",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 170,
        },
        {
          column: "isCtpFlag",
          label: "是否为客户",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
      ],
      tableColumns3: [
        // 评级展望负面的债券
          // 主体评级调低的债券
          {
          column: "assetCode",
          label: "债券代码",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "assetName",
          label: "债券名称",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 240,
        },
        {
          column: "issuer",
          label: "发行人",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 260,
        },
        {
          column: "ratingTypeOrganize",
          label: "评级机构",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "ratingDate",
          label: "评级日期",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "latestEntityRating",
          label: "最新债项评级",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "entityRatingForecast",
          label: "债项评级展望",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "ratingChangeReason",
          label: "评级变动原因",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "preRatingDate",
          label: "上次评级日期",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "preEntityRating",
          label: "上次债项评级",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "preEntityRatingForecast",
          label: "上次债项评级展望",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "entityType",
          label: "公司性质",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 170,
        },
        {
          column: "isCtpFlag",
          label: "是否为客户",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
      ],
      tableColumns4: [
        // 主体评级调低的债券
        {
          column: "assetCode",
          label: "债券代码",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "assetName",
          label: "债券名称",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 240,
        },
        {
          column: "issuer",
          label: "发行人",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 260,
        },
        {
          column: "ratingTypeOrganize",
          label: "评级机构",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "ratingDate",
          label: "评级日期",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "latestEntityRating",
          label: "最新主体评级",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "entityRatingForecast",
          label: "主体评级展望",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "ratingChangeReason",
          label: "评级变动原因",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "preRatingDate",
          label: "上次评级日期",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "preEntityRating",
          label: "上次主体评级",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "preEntityRatingForecast",
          label: "上次主体评级展望",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "entityType",
          label: "公司性质",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 170,
        },
        {
          column: "isCtpFlag",
          label: "是否为客户",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
      ],
      tableColumns5: [
        // 债项评级调低的债券

        {
          column: "assetCode",
          label: "债券代码",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "assetName",
          label: "债券名称",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 240,
        },
        {
          column: "issuer",
          label: "发行人",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 260,
        },
        {
          column: "ratingTypeOrganize",
          label: "评级机构",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "ratingDate",
          label: "评级日期",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "latestEntityRating",
          label: "最新主体评级",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "entityRatingForecast",
          label: "主体评级展望",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "ratingChangeReason",
          label: "评级变动原因",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "preRatingDate",
          label: "上次评级日期",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "preEntityRating",
          label: "上次主体评级",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "preEntityRatingForecast",
          label: "上次主体评级展望",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "entityType",
          label: "公司性质",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 170,
        },
        {
          column: "isCtpFlag",
          label: "是否为客户",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
      ],
      ratingTypeList: [],
    };
  },
  watch: {
    queryForm: {
      handler(newVal, oldVal) {
        if (newVal.ratingType == "RATING1") {
          this.tableColumns = this.tableColumns4;
        }
        if (newVal.ratingType == "RATING2") {
          this.tableColumns = this.tableColumns1;
        }
        if (newVal.ratingType == "RATING3") {
          this.tableColumns = this.tableColumns2;
        }
        if (newVal.ratingType == "RATING4") {
          this.tableColumns = this.tableColumns5;
        }
        if (newVal.ratingType == "RATING5") {
          this.tableColumns = this.tableColumns3;
        }
        // if (newVal.ratingType != oldVal.ratingType) {
          this.getData();
        // }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.getData();
    this.getratingTypeList();
  },
  methods: {
    querySearch(queryString, cb) {
      let params = {
        entityName: queryString,
      };
      let arr = [];
      getratingName(params).then((res) => {
        // console.log(res);
        let _data = res.data || [];
        _data.forEach((item) => {
          arr.push({
            value: item.entityName,
            label: item.entityCode,
          });
        });
      });
      cb(arr);
    },
    resetFrom() {
      this.$refs.queryForm.resetFields();
      this.pageNum = 1;
      this.pageSize = 10;
      this.getData();
    },
    getratingTypeList() {
      getratingType().then((res) => {
        console.log(res);
        this.ratingTypeList = [];
        Object.keys(res.data).forEach((item) => {
          this.ratingTypeList.push({
            label: res.data[item],
            value: item,
          });
        });
      });
    },

    getData() {
      try {
        let params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          ...this.queryForm,
        };
        if (params.timeOfInvlusion && params.timeOfInvlusion.length > 0) {
          params.ratingDateBegin = params.timeOfInvlusion[0];
          params.ratingDateEnd = params.timeOfInvlusion[1];
        }
        delete params.timeOfInvlusion;
        getList(params).then((res) => {
          console.log(res);
          if (res) {
            // let arr = res.data.records;
            this.tableData = res.data.records;
            this.pageNum = res.data.current;
            this.pageSize = res.data.size;
            this.total = res.data.total;
          }
        });
        // console.log(res);
      } catch (error) {}
    },
    complexUniqueArray(arr) {
      const seen = new Map();
      return arr.filter((item) => {
        const isObject = typeof item === "object" && item !== null;
        const key = isObject ? JSON.stringify(item) : item;

        if (seen.has(key)) {
          return false;
        } else {
          seen.set(key, true);
          return true;
        }
      });
    },
    pageFn(num) {
      this.pageNum = num;
      this.getData();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getData();
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  height: 100%;

  .topBar {
    background-color: #262d47;
    margin-bottom: 10px;
    padding: 20px 20px;
    padding-bottom: 10px;
  }

  .bottomInfo {
    flex: 1;
    // width: 100%;
    background-color: #262d47;
    padding-bottom: 20px;
  }

  .el-pagination {
    text-align: right;
    margin-top: 10px;
  }

  .el-table {
    min-height: 440px;
  }

  .el-table ::v-deep th.el-table__cell {
    background-color: #1c2238 !important;
    color: #fff;
  }

  .tableBox {
    background-color: #262d47;
    flex: 1;
    padding: 15px 10px;
  }

  .bondCardTitle {
    height: 40px;
    background: #354060;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    padding: 10px 16px;
  }
}
.update_text {
  color: #fff;
  text-align: right;
  margin: 10px 10px 10px 0px;
}
::v-deep {
  .el-dialog {
    .el-icon-date {
      height: 30px !important;
      line-height: 30px !important;
    }
    .el-range-separator {
      color: #ffffff !important;
      background-color: #363657 !important;
      height: 30px !important;
      line-height: 30px !important;
      z-index: 10;
    }
    .el-input__inner {
      border: 1px solid rgba(126, 163, 255, 0.3) !important;
      color: #ffffff !important;
      background-color: #363657 !important;
      height: 30px !important;
      line-height: 30px !important;
      .el-range-input {
        background-color: #363657 !important;
        height: 28px !important;
        line-height: 28px !important;
      }
    }
  }
  
}
::v-deep .el-form .el-form-item .el-form-item__content .el-input__inner {
  width: 240px !important;
}
</style>
